<template>
  <div>
    <el-table
      :data="dataBackupsList"
      style="width: 100%"
    >
      <el-table-column
        label="备份日期"
      >
        <template slot-scope="scope">
          <i class="el-icon-time" />
          <span style="margin-left: 10px">{{ scope.row.backupsTime }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="备份名称"
      >
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <p>备注名: {{ scope.row.fileName }}</p>
            <p>时间: {{ scope.row.backupsTime }}</p>
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.fileName }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column
        label="备份备注"
      >
        <template slot-scope="scope">
          <i class="el-icon-star-off" />
          <span style="margin-left: 10px">{{ scope.row.remark }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="danger"
            @click="downLoad(scope.$index, scope.row)"
          >下载</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  props: {
    dataBackupsList: {}
  },
  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }]
    }
  },
  methods: {
    downLoad(index, row) {
      var fileName = row.fileName
      this.$download('dataCenter/dataBackupsFiles', { fileName }, fileName + '.xls')
    }
  }
}
</script>
